<template>
  <div class="hello">
    <!-- fixed placeholder 定位在头部并且生成一个等高的盒子 -->
    <van-nav-bar fixed placeholder>
      <template #right>
        <div class="login_title" @click="handLogin" v-if="isShowLoginTitle">
          登录
        </div>
        <!-- <div class="login_title" @click="handLogin" v-else>我的</div> -->
        <van-icon
          @click="handMy"
          size="18"
          color="#fff"
          name="contact"
          v-else
        />
      </template>
      <template #title>
        <div class="login_title">{{ title }}</div>
      </template>
      <template #left>
        <van-icon
          @click="handNavHome"
          color="#fff"
          name="hot-o"
          size="18"
          v-if="isLeftBtn"
        />
        <van-icon
          color="#fff"
          name="arrow-left"
          size="18"
          v-else
          @click="handNavBack"
        />
      </template>
    </van-nav-bar>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRef, toRefs } from "vue";
import { useRouter } from "vue-router";
import storage from "@/utils/storage";
export default defineComponent({
  name: "NavBar",
  props: {
    title: {
      type: String,
      default: "爱买不买",
    },
    isLeftBtn: {
      type: Boolean,
      default: true,
    },
  },
  setup() {
    const isShowLoginTitle = ref(true);
    if (storage.get("token")) {
      isShowLoginTitle.value = false;
    } else {
      isShowLoginTitle.value = true;
    }
    const router = useRouter();
    const handNavBack = () => {
      router.back();
    };
    const handNavHome = () => {
      router.push({
        path: "/",
      });
    };
    const handMy = () => {
      router.push({
        path: "/my",
      });
    };
    const handLogin = () => {
      router.push({
        path: "Login",
      });
    };
    return {
      isShowLoginTitle,
      handLogin,
      handNavBack,
      handNavHome,
      handMy,
    };
  },
});
</script>
<style lang="scss">
.van-nav-bar__content {
  background-color: $themeColor;
}
.login_title {
  color: #fff;
  @include ellipsis();
}
</style>
